<template>
  <div class="order-page">
    <div class="header">
      <h1 class="page-title">待处理工单</h1>
      <button class="back-button" @click="goToHome">
        <i class="fas fa-arrow-left"></i>
        返回首页
      </button>
    </div>
    
    <div class="filters card">
      <div class="filter-row">
        <div class="filter-group">
          <label>工单类型</label>
          <select v-model="filters.type" class="form-select">
            <option value="">全部类型</option>
            <option value="0">安装服务</option>
            <option value="1">维修服务</option>
            <option value="2">咨询服务</option>
            <option value="3">投诉处理</option>
          </select>
        </div>
        <div class="filter-group">
          <label>紧急程度</label>
          <select v-model="filters.priority" class="form-select">
            <option value="">全部</option>
            <option value="0">低</option>
            <option value="1">中</option>
            <option value="2">高</option>
          </select>
        </div>
        <div class="filter-group">
          <label>创建时间</label>
          <input type="date" v-model="filters.createTime" class="form-input">
        </div>
      </div>
      <div class="actions">
        <button class="btn btn-secondary" @click="resetFilters">
          <i class="fas fa-redo"></i> 重置筛选
        </button>
        <button class="btn btn-primary" @click="applyFilters">
          <i class="fas fa-filter"></i> 应用筛选
        </button>
      </div>
    </div>
    
    <div class="orders-container card">
      <div class="orders-header">
        <div class="orders-count">
          <i class="fas fa-clipboard-check"></i> 共找到 {{ filteredOrders.length }} 个待处理工单
        </div>
        <div class="search-box">
          <i class="fas fa-search"></i>
          <input type="text" v-model="searchQuery" placeholder="搜索工单标题、描述或客户姓名..." class="search-input">
        </div>
      </div>
      
      <div class="table-responsive" v-if="filteredOrders.length">
        <table class="orders-table">
          <thead>
            <tr>
              <th>工单ID</th>
              <th>标题</th>
              <th>客户信息</th>
              <th>紧急程度</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in paginatedOrders" :key="order.id">
              <td><span class="order-id">WO-{{ formatId(order.id) }}</span></td>
              <td class="order-title">{{ order.title }}</td>
              <td>
                <div class="customer-info">
                  <div class="customer-name">{{ order.name }}</div>
                  <div class="customer-phone">{{ order.phone }}</div>
                </div>
              </td>
              <td>
                <span class="priority-badge" :class="getPriorityClass(order.priority)">
                  {{ getPriorityText(order.priority) }}
                </span>
              </td>
              <td>{{ formatDate(order.create_time) }}</td>
              <td>
                <div class="action-buttons">
                  <button class="action-btn view-btn" @click="viewOrder(order)">
                    <i class="fas fa-eye"></i> 查看
                  </button>
                  <button class="action-btn process-btn" @click="startProcessing(order)">
                    <i class="fas fa-play-circle"></i> 开始处理
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="empty-state" v-else>
        <i class="fas fa-clipboard-check"></i>
        <p>暂无待处理工单</p>
        <button class="btn btn-primary" @click="resetFilters">清除筛选条件</button>
      </div>
      
      <div class="pagination-container" v-if="filteredOrders.length">
        <div class="pagination-info">
          显示 {{ (currentPage - 1) * pageSize + 1 }} 到 {{ Math.min(currentPage * pageSize, filteredOrders.length) }} 项，共 {{ filteredOrders.length }} 项
        </div>
        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage === 1" class="pagination-arrow">
            <i class="fas fa-chevron-left"></i>
          </button>
          <button v-for="page in totalPages" 
                  :key="page" 
                  @click="setPage(page)"
                  :class="{ 'pagination-button': true, active: currentPage === page }">
            {{ page }}
          </button>
          <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-arrow">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 查看工单弹窗 -->
    <div class="modal-overlay" v-if="showViewModal" @click="closeViewModal">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <h2>查看待处理工单详情</h2>
          <button class="modal-close" @click="closeViewModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="order-details">
            <div class="detail-section">
              <h3>基本信息</h3>
              <div class="detail-grid">
                <div class="detail-item">
                  <label>工单ID:</label>
                  <span>WO-{{ formatId(viewingOrder.id) }}</span>
                </div>
                <div class="detail-item">
                  <label>标题:</label>
                  <span>{{ viewingOrder.title }}</span>
                </div>
                <div class="detail-item">
                  <label>客户姓名:</label>
                  <span>{{ viewingOrder.name }}</span>
                </div>
                <div class="detail-item">
                  <label>联系电话:</label>
                  <span>{{ viewingOrder.phone }}</span>
                </div>
                <div class="detail-item">
                  <label>紧急程度:</label>
                  <span class="priority-badge" :class="getPriorityClass(viewingOrder.priority)">
                    {{ getPriorityText(viewingOrder.priority) }}
                  </span>
                </div>
                <div class="detail-item">
                  <label>创建时间:</label>
                  <span>{{ formatDate(viewingOrder.create_time) }}</span>
                </div>
              </div>
            </div>
            
            <div class="detail-section" v-if="viewingOrder.des">
              <h3>工单描述</h3>
              <div class="detail-content">{{ viewingOrder.des }}</div>
            </div>
            
            <div class="detail-section" v-if="viewingOrder.address">
              <h3>地址信息</h3>
              <div class="detail-content">{{ viewingOrder.address }}</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="closeViewModal">关闭</button>
          <button class="btn btn-primary" @click="startProcessing(viewingOrder)">开始处理</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PendingTickets',
  data() {
    return {
      filters: {
        type: '',
        priority: '',
        createTime: ''
      },
      searchQuery: '',
      currentPage: 1,
      pageSize: 10,
      showViewModal: false,
      viewingOrder: {},
      orders: [
        {
          id: 10008,
          title: '办公室网络故障',
          des: '网络频繁断线，需要紧急处理',
          name: '吴十',
          phone: '13200132000',
          address: '北京市海淀区中关村大街',
          priority: 2,
          status: 0,
          create_time: '2023-09-03T08:20:00'
        },
        {
          id: 10009,
          title: '会议室投影仪安装',
          des: '安装高清投影仪和幕布',
          name: '郑十一',
          phone: '13100131000',
          address: '上海市浦东新区张江高科技园区',
          priority: 1,
          status: 0,
          create_time: '2023-09-02T16:30:00'
        },
        {
          id: 10010,
          title: '电脑无法开机',
          des: '台式电脑按下电源键无反应',
          name: '冯十二',
          phone: '13000130000',
          address: '广州市天河区天河路',
          priority: 2,
          status: 0,
          create_time: '2023-09-02T10:15:00'
        },
        {
          id: 10026,
          title: '打印机共享设置',
          des: '设置网络打印机共享',
          name: '蔡二十八',
          phone: '11400114000',
          address: '深圳市福田区华强北',
          priority: 1,
          status: 0,
          create_time: '2023-09-03T09:45:00'
        },
        {
          id: 10027,
          title: '软件使用培训',
          des: '新员工财务软件使用培训',
          name: '叶二十九',
          phone: '11300113000',
          address: '杭州市余杭区未来科技城',
          priority: 0,
          status: 0,
          create_time: '2023-09-02T14:20:00'
        }
      ]
    }
  },
  computed: {
    filteredOrders() {
      let result = this.orders;
      
      // 只显示状态为0（待处理）的工单
      result = result.filter(order => order.status === 0);
      
      // 应用筛选条件
      if (this.filters.type !== '') {
        result = result.filter(order => order.type == this.filters.type);
      }
      
      if (this.filters.priority !== '') {
        result = result.filter(order => order.priority == this.filters.priority);
      }
      
      // 应用搜索查询
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(order => 
          order.title.toLowerCase().includes(query) ||
          order.name.toLowerCase().includes(query) ||
          order.phone.includes(query) ||
          (order.des && order.des.toLowerCase().includes(query))
        );
      }
      
      return result;
    },
    totalPages() {
      return Math.ceil(this.filteredOrders.length / this.pageSize);
    },
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredOrders.slice(start, start + this.pageSize);
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    resetFilters() {
      this.filters = {
        type: '',
        priority: '',
        createTime: ''
      };
      this.searchQuery = '';
      this.currentPage = 1;
    },
    applyFilters() {
      this.currentPage = 1;
    },
    viewOrder(order) {
      this.viewingOrder = {...order};
      this.showViewModal = true;
    },
    startProcessing(order) {
      if(confirm(`确定开始处理工单 WO-${this.formatId(order.id)} 吗？`)) {
        // 在实际应用中，这里会发送API请求更新工单状态
        alert('工单状态已更新为处理中！');
        this.closeViewModal();
      }
    },
    closeViewModal() {
      this.showViewModal = false;
    },
    formatId(id) {
      return id.toString().padStart(8, '0');
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
    },
    getPriorityText(priority) {
      const priorityMap = {
        0: '低',
        1: '中',
        2: '高'
      };
      return priorityMap[priority] || '未知';
    },
    getPriorityClass(priority) {
      const classMap = {
        0: 'priority-low',
        1: 'priority-medium',
        2: 'priority-high'
      };
      return classMap[priority] || '';
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    setPage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.priority-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.priority-low {
  background: #e8f5e9;
  color: #388e3c;
}

.priority-medium {
  background: #fff8e1;
  color: #f57c00;
}

.priority-high {
  background: #ffebee;
  color: #d32f2f;
}

.process-btn {
  background: #e8f5e9;
  color: #388e3c;
}

.process-btn:hover {
  background: #c8e6c9;
}

/* 基础样式 */
.order-page {
  padding: 20px;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 卡片样式 */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

/* 筛选区域 */
.filters {
  padding: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

.filter-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.form-select, .form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-select:focus, .form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #e7e9ed;
  color: #555;
}

.btn-secondary:hover {
  background: #d5d8dc;
}

/* 工单容器 */
.orders-container {
  padding: 0;
}

.orders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.orders-count {
  font-weight: 500;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-box {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  width: 300px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px;
  font-size: 14px;
}

/* 表格样式 */
.table-responsive {
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th {
  background: #f8f9fa;
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #e8e8e8;
}

.orders-table td {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.orders-table tr:hover {
  background: #f8f9fa;
}

.order-id {
  color: #3498db;
  font-weight: 500;
  font-family: monospace;
}

.order-title {
  font-weight: 500;
  color: #2c3e50;
}

.customer-info {
  line-height: 1.4;
}

.customer-name {
  font-weight: 500;
}

.customer-phone {
  color: #7f8c8d;
  font-size: 13px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}

.view-btn {
  background: #e3f2fd;
  color: #1976d2;
}

.view-btn:hover {
  background: #bbdefb;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 40px;
  color: #888;
}

.empty-state i {
  font-size: 64px;
  margin-bottom: 16px;
  color: #ccc;
}

.empty-state p {
  font-size: 18px;
  margin-bottom: 24px;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
}

.pagination-info {
  color: #7f8c8d;
  font-size: 14px;
}

.pagination {
  display: flex;
  gap: 8px;
}

.pagination-button, .pagination-arrow {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.pagination-button:hover, .pagination-arrow:hover:not(:disabled) {
  background: #f5f5f5;
}

.pagination-button.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.pagination-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  padding: 5px;
}

.modal-close:hover {
  color: #666;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #e8e8e8;
}

/* 详情样式 */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item label {
  font-weight: 500;
  color: #7f8c8d;
  margin-bottom: 4px;
  font-size: 14px;
}

.detail-item span {
  color: #2c3e50;
}

.detail-content {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-row {
    flex-direction: column;
  }
  
  .filter-group {
    min-width: 100%;
  }
  
  .orders-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .search-box {
    width: 100%;
  }
  
  .pagination-container {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .modal {
    width: 95%;
    margin: 20px;
  }
}
</style>